﻿@page
@model FytSoa.Web.Pages.FytAdmin.DefaultModel
@{
    ViewData["Title"] = "默认页";
    Layout = AdminLayout.Pjax(HttpContext);
}
<div id="container">
    <style>
        body {
            background-color: #f1f4f5;
        }
    </style>
    <div class="layui-fluid" id="defaultapp">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12 layui-col-lg8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">快捷方式</div>
                            <div class="layui-card-body">
                                <div class="layui-carousel layadmin-carousel layadmin-shortcut" id="shortcut" lay-anim="" lay-indicator="inside" lay-arrow="none">
                                    <div carousel-item>
                                        <ul class="layui-row layui-col-space10 layui-this">
                                            <li class="layui-col-xs3">
                                                <a href="/fytadmin/goods/barcode/">
                                                    <i class="layui-icon layui-icon-form"></i>
                                                    <cite>条形码</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="/fytadmin/purchase/index/1">
                                                    <i class="layui-icon layui-icon-cart"></i>
                                                    <cite>采购</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="/fytadmin/member/index/">
                                                    <i class="layui-icon layui-icon-user"></i>
                                                    <cite>会员</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="/fytadmin/shop/index/">
                                                    <i class="layui-icon layui-icon-chat"></i>
                                                    <cite>加盟商</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="/fytadmin/stock/import/">
                                                    <i class="layui-icon layui-icon-engine"></i>
                                                    <cite>入库</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="/fytadmin/stock/export/">
                                                    <i class="layui-icon layui-icon-component"></i>
                                                    <cite>出库</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="/fytadmin/stock/transfer/">
                                                    <i class="layui-icon layui-icon-senior"></i>
                                                    <cite>调拨</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="/fytadmin/sale/back/">
                                                    <i class="layui-icon layui-icon-refresh-1"></i>
                                                    <cite>退货</cite>
                                                </a>
                                            </li>
                                        </ul>
                                        <ul class="layui-row layui-col-space10">
                                            <li class="layui-col-xs3">
                                                <a href="/fytadmin/sale/return/">
                                                    <i class="layui-icon layui-icon-return"></i>
                                                    <cite>返货</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="/fytadmin/finance/accounting/">
                                                    <i class="layui-icon layui-icon-dollar"></i>
                                                    <cite>财务</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="/fytadmin/finance/report/">
                                                    <i class="layui-icon layui-icon-chart"></i>
                                                    <cite>销售报表</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="javascript:void(0)">
                                                    <i class="layui-icon layui-icon-fonts-clear"></i>
                                                    <cite>库存盘点</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="javascript:void(0)">
                                                    <i class="layui-icon layui-icon-chat"></i>
                                                    <cite>积分商品</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a href="javascript:void(0)">
                                                    <i class="layui-icon layui-icon-read"></i>
                                                    <cite>积分订单</cite>
                                                </a>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">待办事项</div>
                            <div class="layui-card-body">
                                <div class="layui-carousel layadmin-carousel layadmin-backlog" id="backlog" lay-anim="" lay-indicator="inside" lay-arrow="none">
                                    <div carousel-item>
                                        <ul class="layui-row layui-col-space10 layui-this">
                                            <li class="layui-col-xs6">
                                                <a lay-href="" class="layadmin-backlog-body">
                                                    <h3>待返货处理</h3>
                                                    <p><cite>{{model.returnCount}}</cite></p>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs6">
                                                <a lay-href="" class="layadmin-backlog-body">
                                                    <h3>待退货处理</h3>
                                                    <p><cite>{{model.backCount}}</cite></p>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs6">
                                                <a lay-href="" class="layadmin-backlog-body">
                                                    <h3>库存报警数量</h3>
                                                    <p><cite>{{model.stockPoliceCount}}</cite></p>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs6">
                                                <a lay-href="" class="layadmin-backlog-body">
                                                    <h3>今日加入会员</h3>
                                                    <p><cite>{{model.joinUserCount}}</cite></p>
                                                </a>
                                            </li>
                                        </ul>
                                        <ul class="layui-row layui-col-space10">
                                            <li class="layui-col-xs6">
                                                <a lay-href="" class="layadmin-backlog-body">
                                                    <h3>积分订单处理</h3>
                                                    <p><cite style="color: #FF5722;">0</cite></p>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">数据概览</div>
                            <div class="layui-card-body">
                                <div id="base-map" style="width: 100%;height:300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">品牌销售排行榜 Top20</div>
                            <div class="layui-card-body">
                                <div id="brand-top" style="width: 100%;height:355px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-lg4 layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">版本信息</div>
                    <div class="layui-card-body layui-text" style="height:210px;">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>欢迎您</td>
                                    <td>
                                        admins超级管理员
                                    </td>
                                </tr>
                                <tr>
                                    <td>更新时间</td>
                                    <td>上次登录日期：2018/5/4 22:44:53　　<a href="/fytadmin/syslog/index">查看日志</a></td>
                                </tr>
                                <tr>
                                    <td>当前版本</td>
                                    <td>
                                        V1.0.0  pro最后　更新时间：2017-07-20
                                    </td>
                                </tr>
                                <tr>
                                    <td>授权说明</td>
                                    <td>
                                        本系统是北京飞易腾科技有限公司授权予 飞易腾 使用！
                                    </td>
                                </tr>
                                <tr>
                                    <td>求助帮助</td>
                                    <td>
                                        <a href="" class="layui-badge layui-bg-blue">联系客服</a>　　<span class="layui-badge layui-bg-gray">13511084034</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">销售统计</div>
                    <div class="layui-card-body">
                        <div class="layui-row fyt-counter">
                            <div class="layui-col-md4">
                                <div class="counter-label">今日</div>
                                <div class="counter-number red-600">{{model.daySaleMoney}}</div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="counter-label">本周</div>
                                <div class="counter-number red-600">{{model.weekSaleMoney}}</div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="counter-label">本月</div>
                                <div class="counter-number red-600">{{model.monthSaleMoney}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">销售统计效果</div>
                    <div class="layui-card-body layadmin-takerates">
                        <div class="layui-progress" lay-showpercent="yes">
                            <h3>转化率（日同比 {{model.dayOnYear}}% <span class="layui-edge layui-edge-top" lay-tips="增长" lay-offset="-15"></span>）</h3>
                            <div class="layui-progress-bar" :lay-percent="model.dayOnYear+'%'"><span class="layui-progress-text">{{model.dayOnYear}}%</span></div>
                        </div>
                        <div class="layui-progress" lay-showpercent="yes">
                            <h3>签到率（周同比 {{model.weekOnYear}}% <span class="layui-edge layui-edge-bottom" lay-tips="下降" lay-offset="-15"></span>）</h3>
                            <div class="layui-progress-bar layui-bg-orange" :lay-percent="model.weekOnYear+'%'"><span class="layui-progress-text">{{model.weekOnYear}}%</span></div>
                        </div>
                        <div class="layui-progress" lay-showpercent="yes">
                            <h3>签到率（月同比 {{model.monthOnYear}}% <span class="layui-edge layui-edge-bottom" lay-tips="下降" lay-offset="-15"></span>）</h3>
                            <div class="layui-progress-bar layui-bg-orange" :lay-percent="model.monthOnYear+'%'"><span class="layui-progress-text">{{model.monthOnYear}}%</span></div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">店铺销售排行榜</div>
                    <div class="layui-card-body fyt-shoptop">
                        <table class="layui-table">
                            <colgroup>
                                <col>
                                <col width="80">
                                <col width="90">
                                <col width="150">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>加盟商名称</th>
                                    <th>总金额</th>
                                    <th>订单总数</th>
                                    <th>占比</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="it in topList" v-cloak>
                                    <td>{{it.shopName}}</td>
                                    <td>￥{{it.money}}</td>
                                    <td>{{it.counts}}</td>
                                    <td>
                                        <div class="layui-progress" lay-showpercent="true">
                                            <div class="layui-progress-bar" :lay-percent="it.ratio+'%'"></div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="~/themes/js/echarts.min.js"></script>
    <script type="text/javascript" src="~/themes/js/macarons.js"></script>
    <script>
        var d_vm = new Vue({
            el: '#defaultapp',
            data: {
                topList:[],
                model: []
            }
        });

        layui.use(['carousel', 'element', 'layer', 'jquery', 'common'], function () {
            var carousel = layui.carousel
                , os = layui.common
                , element = layui.element
                , $ = layui.jquery;
            //os.ajax('api/default/backlog', null, function (res) { 
            //    if (res.statusCode === 200) {
            //        d_vm.model = res.data; 
            //    } else {
            //        os.error(res.message); alert('1111');
            //    }
            //});
            carousel.render({
                elem: '#shortcut'
                , width: '100%'
                , autoplay: false
                , arrow: 'none'
                , height: '180px'
                , indicator: 'outside'
            });
            carousel.render({
                elem: '#backlog'
                , width: '100%'
                , autoplay: false
                , arrow: 'none'
                , height: '180px'
                , indicator: 'outside'
            });
            var active = {
                loadTop: function () {
                    os.ajax('api/default/shoptop', null, function (res) {
                        if (res.statusCode === 200) {
                            d_vm.topList = res.data; 
                            d_vm.$nextTick(function () {
                                element.render();
                            });
                        } else {
                            os.error(res.message);
                        }
                    });
                },
                init: function () { 
                    os.ajax('api/default/weeksale', null, function (res) {
                        if (res.statusCode === 200) {
                            baseChart.hideLoading();
                            var money = [], order = [];
                            $.each(res.data.money, function (i, m) {
                                money.push(m);
                            });
                            $.each(res.data.order, function (i, m) {
                                order.push(m);
                            });
                            baseChart.setOption({
                                series: [
                                    {
                                        name: '订单总数',
                                        type: 'line',
                                        areaStyle: { normal: {} },
                                        data: order
                                    },
                                    {
                                        name: '销售金额',
                                        type: 'line',
                                        areaStyle: { normal: {} },
                                        data: money
                                    }
                                ]
                            });
                        } else {
                            os.error(res.message);
                        }
                    });

                    os.ajax('api/default/brandtop', null, function (res) {
                        if (res.statusCode === 200) {
                            brandChart.hideLoading();
                            var names = [], counts = [];
                            $.each(res.data, function (i, m) {
                                names.push(m.brandName);
                                counts.push(m.counts);
                            });
                            brandChart.setOption({
                                xAxis: {
                                    data: names
                                },
                                series: [
                                    {
                                        data: counts
                                    }
                                ]
                            });
                        } else {
                            os.error(res.message);
                        }
                    });
                }
            };
            //active.loadTop();
            setTimeout(function () {
                //active.init();
            }, 1000);

            
        });
        var baseChart = echarts.init(document.getElementById('base-map'), 'macarons');
        baseChart.showLoading();
        var option = {
            title: {
                //show:false,
                text: '今日销售金额汇总',
                textStyle: {
                    color: '#888',
                    align: 'center',
                    fontSize: 14,
                    fontWeight: '400'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    magicType: {
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ]
        };
        baseChart.setOption(option);

        var dataAxis = ['芳华店', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
        var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
        var yMax = 500;
        var dataShadow = [];
        for (var i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }
        var brandChart = echarts.init(document.getElementById('brand-top'), 'macarons');
        brandChart.showLoading();
        brandChart.setOption({
            title: {
                show: false,
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    magicType: {
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    saveAsImage: {}
                }
            },
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#188df0' }
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ]
                            )
                        }
                    },
                    data: data
                }
            ]
        });

    </script>
</div>
